<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.content{
				position: absolute;
				left: 200px;
				top: 50px;
				width: 550px;
				height: 180px;
				border: 1px solid royalblue;
				}
		.content ul{
				padding: 10px;
				margin: 0;
				list-style: none;
				width: 20px;
				float: right;
			}
		.content ul li{
			
			border: 1px solid #4169E1;
			text-align: center;
		}
		.selected {
			background: #FF7F50;
		}
		</style>
	</head>
	<body>
		<div class="content">
			<img src="img/dd_1.jpg" id="pic"/>
		    <ul>
		    	<li id="pic1d">1</li>
		    	<li id="pic2d">2</li>
		    	<li id="pic3d">3</li>
		    	<li id="pic4d">4</li>
		    	<li id="pic5d">5</li>
		    	<li id="pic6d">6</li>
		    </ul>
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<script>
			//自动轮播
			//首页先有一张图
			//然后定时器每2秒换一张图片
			window.onload = init;
			function init(){
				
				 change1 = setInterval("change()",1000)  
				
			}
			
			
			var n = 1 ; 
			function change(){
				var pic = document.getElementById("pic");
				if(n==6){
					n = 0;
				}
				n++;
				pic.src = "img/dd_"+ n +".jpg";
					//第n个li标签跟随第n张图片
				var list = document.getElementsByTagName("li");
				$("li").eq(n-1).addClass("selected").siblings().removeClass("selected");
			}
		

			
			
			
			function cleartime(){
				
				window.clearInterval(change1)
			}
			
			
			//当鼠标移动到li标识的数字 直接跳转到那一页并停留 
			$("li").hover(function(){
				$(this).addClass("selected").siblings().removeClass("selected");
				var _index = $(this).index();
				  n = _index+1
					pic.src = "img/dd_"+ n +".jpg";
					cleartime();
			})
			$("li").mouseleave(function(){
				
			  init();
			})
			$("#pic").hover(function(){
				cleartime();
			})
				$("#pic").mouseleave(function(){
				
			  init();
			})
			
		
		
			
		</script>
	</body>
</html>
